.action-shade{
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  // background-color: red;
  display: none;
}
.show-shade{
  display:initial;
}
.action-wrapper{
  position: fixed;
  display: flex;
  background: #474747;
  padding: 10px 10px 0 10px;
  transform: scale(0, 0);
  color: #fff;
  border-radius: 10px;
}
.up-target::before {  //这里就是小三角了
  content: "";
  display: block;
  position: absolute;
  top: -20px;
  border-width: 10px;
  border-style: dashed  dashed  solid  dashed;//四个参数分别代表向下，左，上,右的小三角(对应方向的小三角设置为solid，其他的为dashed。我这里演示向左的小三角，所以设置第二个）
  border-color:transparent transparent #474747 transparent;//四个参数分别代表向下，左，上右的小三角。对应方向的小三角设置你想要的颜色（为了直观我这里设置黑色），其他的为transparent。我这里演示向左的小三角，所以设置第二个。
}
.down-target::after {  //这里就是小三角了
  content: "";
  display: block;
  position: absolute;
  bottom: -20rpx;
  border-width: 10px;
  border-style: solid  dashed  dashed  dashed;//四个参数分别代表向下，左，上,右的小三角(对应方向的小三角设置为solid，其他的为dashed。我这里演示向左的小三角，所以设置第二个）
  border-color:#474747 transparent transparent transparent;//四个参数分别代表向下，左，上右的小三角。对应方向的小三角设置你想要的颜色（为了直观我这里设置黑色），其他的为transparent。我这里演示向左的小三角，所以设置第二个。
}
.action-items{
  display: flex;
  width: 300px;
  flex-wrap: wrap;
  .action-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    // height: 30px;
    // line-height: 30px;
    text-align: center;
    color: #fff;
    font-size: .7rem;
    // background-color: deepskyblue;
    margin: 0 calc(10% / 3 / 2) 10px calc(10% / 3 / 2);
  }
  .mini-items{
    width: 45%;
    margin: 0 calc(10% / 2 / 2) 10px calc(10% / 2 / 2);
  }
}
.min-items{
  width: 200px;
}
.show{
  transform: scale(1, 1);
}
